<template>
    <div>
        <el-container>
            <el-header class="">哈哈车位管理系统</el-header>
            <el-main>
                <el-row type="flex" justify="center">
                    <!-- justify 对齐方式 -->
                    <el-col :span="6">
                        <div class="grid-content"></div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <!-- justify 对齐方式 -->
                    <el-col :span="6">
                        <el-card shadow="always">
                            <h1 style="text-align: center; color: #3e4b58">
                                欢迎注册
                            </h1>
                            <el-divider></el-divider>
                            <!-- form表单 -->
                            <el-form
                                :model="lessorsData"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <!-- 用户名 -->
                                <el-form-item
                                    label="用户名"
                                    prop="account"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '用户名不能为空',
                                        },
                                        {
                                            min: 3,
                                            max: 10,
                                            message: '请注册3~10位的用户名',
                                            trigger: 'blur',
                                        },
                                    ]"
                                >
                                    <el-input
                                        placeholder="请输入要注册的用户名"
                                        v-model="lessorsData.account"
                                        type="text"
                                        autocomplete="off"
                                        @change="isaccount"
                                    ></el-input>
                                </el-form-item>

                                <!-- 密码 -->
                                <el-form-item
                                    label="密码"
                                    prop="password"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '密码不能为空',
                                        },
                                        {
                                            min: 6,
                                            max: 16,
                                            message: '请注册6~16位的密码',
                                            trigger: 'blur',
                                        },
                                    ]"
                                >
                                    <el-input
                                        placeholder="请输入要注册密码"
                                        v-model="lessorsData.password"
                                        show-password
                                    ></el-input>
                                </el-form-item>
                                <!-- 按钮 -->
                                <el-form-item>
                                    <el-button
                                        type="primary"
                                        class="button"
                                        @click="registerLessors"
                                        :disabled="status == 1"
                                        >注册</el-button
                                    >
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import apis from "../../http/apis/apis";
export default {
    data() {
        return {
            // 出租方注册
            lessorsData: {
                account: "",
                password: "",
            },
            status: 0,
        };
    },
    methods: {
        // 注册
        async registerLessors() {
            if (
                this.lessorsData.account != "" &&
                this.lessorsData.password != ""
            ) {
                const { data } = await apis.lessors.registerLessors({
                    account: this.lessorsData.account,
                    password: this.lessorsData.password,
                });
                if (data.status) {
                    alert("注册成功");
                    this.$router.push("/login");
                }
            } else {
                alert("内容不能为空");
            }
        },
        // 验证账号
        async isaccount() {
            const { data } = await apis.lessors.isaccount({
                account: this.lessorsData.account,
            });
            if (data.status) {
                this.status = data.status;
            }
        },
    },
};
</script>

<style>
.button {
    width: 110px;
    margin-left: -55px;
    border-radius: 10px;
}
.el-radio-group {
    display: flex;
    margin: 20px;
    /* 边缘 */
    justify-content: center;
}
.el-card {
    border-radius: 30px;
    width: 380px;
    border: 1px solid rgb(13, 241, 24);
}
.grid-content {
    border-radius: 4px;
    min-height: 80px;
}
.el-row {
    margin-bottom: 20px;
}
.el-form-item {
    width: 300px;
    margin-right: 30px;
}
</style>